<!--
私信
 -->
<template>
  <div>
    <noMore v-if="FriendData.length == 0"></noMore>
    <div class="PrivateLetter" v-for="(item, index) in FriendData" :key="index">
      <div class="PrivateLetterBox">
        <div class="PrivateLetterLeft">
          <div class="PrivateLetterBoxTitle">
            <img class="headimg" :src="item.friend_id.head_portrait | imgF" />
            <div class="headText">
              <div class="headName">{{ item.friend_id.name }}</div>
              <div class="headTime">
                {{ item.Unread_number + "条未读留言" }}
              </div>
            </div>
          </div>
          <div class="PrivateLetterMain">
            {{ "最近一条留言:" + item.latest_information }}
          </div>
        </div>
        <div class="PrivateLetterRight">
          <el-button
            type="text"
            class="PrivateLetterBtn"
            @click="Opendrawer(item.friend_id._id)"
            >回复</el-button
          >
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="limitSize"
      layout="prev, pager, next, jumper"
      :total="RecordeSize"
    ></el-pagination>
    <message @getdata="getdata" ref="child"></message>
  </div>
</template>

<script>
import noMore from "../../../components/noMore";
import { defaultAvatarURL } from "../../../utils/global";
import { get_friend } from "../../../api/friend";
import message from "../../message";
export default {
  name: "myPrivateLetter",
  data() {
    return {
      drawer: false,
      direction: "rtl",
      skipSize: 0, //开始位置
      RecordeSize: 0, //总文章
      limitSize: 10,
      FriendData: []
    };
  },
  filters: {
    imgF(val) {
      return defaultAvatarURL + val;
    }
  },
  components: {
    message,
    noMore
  },
  created() {
    this.getdata();
  },
  methods: {
    async getdata() {
      var reqdata = {
        query: {
          user_id: this.$store.getters.userInfo._id
        },
        sort: {
          Unread_number: "1"
        },
        skip: this.skipSize,
        limit: this.limitSize,
        count: true,
        populate: JSON.stringify([{ path: "friend_id" }])
      };
      var datas = await get_friend(reqdata);
      console.log(datas);
      this.FriendData = datas.data;
      this.RecordeSize = datas.countnum;
    },
    Opendrawer(val) {
      if (val == this.$store.getters.userInfo._id) {
        this.$message({
          message: "不可以发私信给自己喔~",
          type: "warning"
        });
        return;
      }
      this.$refs.child.open(val);
    },
    handleCurrentChange(val) {
      this.skipSize = (val - 1) * this.limitSize;
      console.log(`当前页: ${val}`);
      this.getdata();
    }
  }
};
</script>

<style lang="scss" scoped>
.PrivateLetter {
  .PrivateLetterBox {
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .PrivateLetterLeft {
      width: 80%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .PrivateLetterBoxTitle {
        display: flex;
        .headimg {
          height: 40px;
          width: 40px;
          border-radius: 50%;
        }
        .headText {
          margin: 0 0 0 10px;
          display: flex;
          flex-direction: column;
          .headName {
            font-size: 16px;
          }
          .headTime {
            font-size: 16px;
            color: #808080;
          }
        }
      }
      .PrivateLetterMain {
        color: #6c6c6c;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
      }
    }
    .PrivateLetterRight {
      display: flex;
      align-items: center;
      padding: 30px 0 0 0;
      .PrivateLetterBtn {
        color: #e06b30;
      }
    }
  }
}
</style>
